<template>
  <div id="category" class="category">
    <ul>
      <button @click="btnclick">按钮</button>
      <li>1111</li>
      <li>1111</li>
      <li>1111</li>
      <li>1111</li>
      <li>1111</li>
      <li>1111</li>
      <li>1111</li>
      <li>1111</li>
      <li>1111</li>
      <li>1111</li>
      <li>1111</li>
      <li>5555</li>
      <li>5555</li>
      <li>5555</li>
      <li>5555</li>
      <li>5555</li>
      <li>5555</li>
      <li>5555</li>
      <li>5555</li>
      <li>5555</li>
      <li>6666</li>
      <li>6666</li>
      <li>6666</li>
      <li>6666</li>
      <li>6666</li>
      <li>6666</li>
      <li>6666</li>
      <li>6666</li>
      <li>6666</li>
      <li>6666</li>
      <li>6666</li>
      <li>6666</li>
      <li>6666</li>
      <li>6666</li>
      <li>6666</li>
      <li>6666</li>
      <li>6666</li>
      <li>6666</li>
      <li>6666</li>
      <li>6666</li>
      <li>6666</li>
      <li>6666</li>
    </ul>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  components: {
    
  },
  data() {
      return {
          scroll:null
      }
  },
  mounted() {
    this.scroll = new BScroll(document.querySelector('.category'),{
      probeType:3
    })

    this.scroll.on('scroll',postion=>{
      console.log(postion)
    })
  },
  methods: {
    btnclick(){

    }
  },
}
</script>

<style>
  .category{
    height: 300px;
    background-color: red;
    overflow: hidden;

  }
</style>